<template>
	<view>
		<!-- 加入顶部图片方式与发布相同,记得改高度 -->
		<view style="width: 100%; height: auto; overflow: hidden;">
			<image class="box" mode="widthFix" src="../../static/image/banner.jpg"></image>
		</view>
		<view class="all" v-if="type ==1">
			<view class="top">
				<image class="user_img" mode="aspectFill" :src="srcUrl(leaderDetails.photo_path)"></image>
				<view style="display: flex; flex-direction: column; flex:1; margin: -10upx 0;">
					<view class="list">
						<text class="text_h">{{leaderDetails.name}}</text>
					</view>
					<view style="height: 26upx;"></view>
					<view class="list_i">
						<text class="text_i">职务：{{leaderDetails.job}}</text>
					</view>

					<view class="list_i">
						<text class="text_i">任期：{{leaderDetails.job_start_date}}至{{leaderDetails.job_end_date}}</text>
					</view>

				</view>
				<view style="width: 10upx;"></view>
			</view>

			<view class="page">
				<view style="height: 20upx;"></view>
				<view class="h3">简介:</view>
				<view class="br" style="margin-top: 10upx; height: 4upx; width: 94%; background: #e74a4a;"></view>
				<view class="h4">
					<view v-if="leaderDetails.brief !=null && leaderDetails.brief !=''">{{leaderDetails.brief}}</view>
					<view v-else style="text-align: center;">暂无简介信息</view>
				</view>
			</view>
		</view>
		<view class="all" v-if="type ==2">
			<view class="top">
				<image class="user_img" mode="aspectFill" :src="srcImage(alumniDetails.photoPath)"></image>
				<view style="display: flex; flex-direction: column; flex:1; margin: -10upx 0;">
					<view class="list">
						<text class="text_h">{{alumniDetails.name}}</text>
					</view>
					<view style="height: 18upx;"></view>
					<view class="list_i">
						<text class="text_i">职务：{{alumniDetails.job}}</text>
					</view>

					<view class="list_i">
						<text class="text_i"
							v-if="alumniDetails.workUnit!=null && alumniDetails.workUnit!=''">工作单位：{{alumniDetails.workUnit}}</text>
						<text class="text_i" v-else>工作单位：未公开</text>
					</view>

				</view>
				<view style="width: 10upx;"></view>
			</view>

			<view class="page">
				<view style="height: 20upx;"></view>
				<view class="h3">简介:</view>
				<view class="br" style="margin-top: 10upx; height: 4upx; width: 94%; background: #e74a4a;"></view>
				<view class="h4">
					<view v-if="alumniDetails.brief !=null && alumniDetails.brief !=''">{{alumniDetails.brief}}</view>
					<view v-else style="text-align: center;">暂无简介信息</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFindLeadersById,
		getFindByAlumnisById
	} from "@api"
	import Vue from "vue"
	export default {
		name: "leader_info",
		data() {
			return {
				leaderDetails: [], //领导详情信息
				alumniDetails: [], //杰出校友详情
				type: 0
			}
		},
		onLoad(e) {
			this.type = e.type;
			if (e.type == 1) {
				getFindLeadersById({
						id: e.id
					})
					.then(res => {
						this.leaderDetails = res[0];
						//任职开始日期
						this.leaderDetails.job_start_date = this.happenTimeFun(res[0].job_start_date);
						//任职结束日期
						this.leaderDetails.job_end_date = this.happenTimeFun(res[0].job_end_date);
					})
			} else if (e.type == 2) {
				getFindByAlumnisById({
						id: e.id
					})
					.then(res => {
						this.alumniDetails = res.content[0];
					})
			}

		},
		methods: {
			srcUrl: function(path) {
				if(path == "" || path == undefined || path == null){
					return Vue.prototype.$t.URL.staticImg + "/noimage.bmp"
				}else{
				return Vue.prototype.$t.URL.leader + path;
				}
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '/' + MM + '/' + d; //年月日
			},
			srcImage: function(image) {
				return this.$t.getImageUrl(image);
			}
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 300rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: cover;
	}
	
	.all {
		background: #eae8e8;
		padding: 0 10upx;
	}

	.top {

		width: 100%;
		height: 300upx;
		border-radius: 0 0 20upx 20upx;
		display: flex;
		padding: 20upx;
		padding-top: 30upx;
		border-radius: 10upx;
	}

	.user_img {
		width: 200upx;
		height: auto;
		border-radius: 10upx;
	}

	.list {
		margin: 0 10upx;
		margin-top: 10upx;
	}

	.list_i {
		margin: 15upx 20upx;
	}

	.page {
		width: 100%;
		height: 800upx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 20upx;
		margin-top: 10upx;
		box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.0);
	}

	.text_h {
		margin-left: 14upx;
		line-height: 50upx;
		font-size: 52upx;
		font-weight: bold;
	}

	.text_i {
		font-size: 30upx;
		margin-left: 10upx;
	}

	.br {
		margin: 0 auto;
		width: 96%;
		height: 2rpx;
		background: #efeff0;
	}

	.h3 {
		font-size: 36upx;
		margin-left: 20upx;
		text-indent: 10upx;
		font-weight: bold;
	}

	.h4 {

		font-size: 32upx;
		text-indent: 20upx;
		margin: 10upx 26upx;
	}
</style>
